<template>
	<view class="regist">
		<!-- 系统状态栏高度 -->
		<!-- #ifdef APP-PLUS -->
		<StatusBar></StatusBar>
		<!-- #endif -->
		<!-- 自定义导航栏 -->
		<!-- #ifdef APP-PLUS || H5 -->
		<view class="loginBar flex f-j-between f-a-center">
			<navigator open-type="navigateBack" hover-class="none"><arrow size="45" color="#333333" direction="left"></arrow></navigator>
			<navigator open-type="navigateBack" hover-class="none" class="bar-right">登录</navigator>
		</view>
		<!-- #endif -->
		<view class="logo-text">新用户注册</view>
		
		<view class="account flex f-j-center flex-wrap">
			<view class="section flex f-a-center f-j-between">
				<input class="phone flex1" type="number" :maxlength="11" v-model="postData.mobile" placeholder="请输入手机号码" />
				<text class="getCodeBtn" type="default" @tap="getCode">{{ count }}{{ btnMsg }}</text>
			</view>
			<view class="section flex f-a-center"><input class="flex1" type="number" :maxlength="6" v-model="postData.code" placeholder="请输入验证码" /></view>
			<view class="section flex f-a-center f-j-between">
				<input class="pwd flex1" password type="text" v-model="password" @input="pwdInput" @blur="isShowPwdClear" @focus="isShowPwdClear" placeholder="请设置密码" />
				<view class="pwd-clearText" :class="{'pwd-clearText-show':isShowClear_pwd}" @tap="clearText('password')"><close size="30" color="#999999"></close></view>	
			</view>
			<view class="section flex f-j-between f-a-center">
				<input class="pwd flex1" password type="text" v-model="confirm_password" @input="cpwdInput" @blur="isShowCPwdClear" @focus="isShowCPwdClear" placeholder="请确认密码" />
				<view class="pwd-clearText" :class="{'pwd-clearText-show':isShowClear_cpwd}" @tap="clearText('confirm_password')"><close size="30" color="#999999"></close></view>
			</view>
		</view>
		
		<view class="flex f-j-center">
			<view 
				:class="[
					'loginBtn flex f-j-center f-a-center',
					{'loginBtnLoading':isRotate},
					{'loginBtnOpacity':postData.mobile&&password&&confirm_password&&postData.code}
					]" 
				@tap="register()"
				>
				<image src="@/static/icons/btnLoading.png" v-if="isRotate" :class="['btnLoading',{'rotate_loop':isRotate}]"></image>
				<text v-if="!isRotate" class="buttonText">注 册</text>
			</view>
		</view>
			
		
		<!-- 平台隐私政策、用户协议 -->
		<view class="agreement flex f-a-center f-j-center">
			<text class="text">注册即代表您已同意</text>
			<navigator open-type="navigate" hover-class="none" :url="'/pages/common/article?id='+article.registration_agreement">
				<text class="navigate">《恒朗源来用户使用及隐私政策》</text>
			</navigator>
		</view>
		
	</view>
</template>

<script>
	const TIME_COUNT = 60;
	import henglang from '@/common/common.js';
	import jewel from '@/common/common_zb.js';
	import md5 from '@/common/md5.js';
	export default {
		data() {
			return {
				mobile: '',
				password: '',
				confirm_password: '',
				btnMsg: '',
				isToggle: true,
				count: '获取验证码',
				timer: null,
				loginTimer: null,
				isShowClear_pwd: false,
				isShowClear_cpwd: false,
				isRotate: false,
				postData: {
				    mobile: '',
				    code: '',
					password:'',
					confirm_password:'',
					union_id:'',
					pid:''
				},
				article:uni.getStorageSync('article')
			}
		},
		onLoad({pid}) {
			//扫码注册
			if(pid) this.postData.pid = pid
			//微信登录未绑定手机号码
			if(uni.getStorageSync('wxauthInfo').union_id) this.postData = uni.getStorageSync('wxauthInfo')
		},
		mounted() {
			// #ifdef APP-PLUS
			// 引用字体包
			let domModule = weex.requireModule('dom');
			domModule.addRule('fontFace', {
				fontFamily: 'medium',
				src: "url('https://www.chinabdc.cn:8092/H5/font/PingFangSC-Medium.ttf')"
			});
			// #endif
		},
		methods: {
			register(){
				let that = this;
				uni.hideKeyboard()
				if(!that.postData.mobile||!that.postData.code||!that.password||!that.confirm_password||that.isRotate){
					return false
				}else if(!jewel.checkPhone(that.postData.mobile)){
					jewel.showToast('请输入正确的手机号码')
				}else if(!jewel.checkCode(that.postData.code)){
					jewel.showToast('请输入6位数的验证码')
				}else if(that.password.length < 6){
					jewel.showToast('密码至少要6位');
				}else if(that.password !== that.confirm_password){
					jewel.showToast('两次输入的密码不一致');
				}else{
					that.postData.password = md5(that.password)
					that.postData.confirm_password = md5(that.confirm_password)
					that.postData.reg_way = uni.getSystemInfo().system == 'android' ? '1' : '2'
					// #ifndef H5
					that.isRotate=true
					if(that.postData.union_id){
						//1、有微信账号，绑定手机号码
						jewel.post('auth/register',that.postData,false,function(res){
							that.isRotate=false
							if (res.data.code == 0) {
								jewel.showToast(res.data.msg,500);
								uni.setStorage({ // 保存登录状态
									key: 'token',
									data: res.data.data.token,
								});
								uni.setStorage({ // 保存用户的信息
									key: 'userInfo',
									data: res.data.data.member,
									success() {
										//注册设备
										henglang.regPush(true);
									}
								});
								setTimeout(()=>{
									uni.switchTab({
										url:'/pages/jewel/index/index'
									})
								},500)
								uni.removeStorageSync('wxauthInfo')
							}else{
								that.isRotate=false
								jewel.showToast(res.data.msg);
							}
						},function(res){
							that.isRotate=false
							jewel.showToast('请求失败');
							that.nCountdown = false;
						});
					}else{
						//1、首次注册
						uni.login({
							provider: 'weixin',
							success: function(res) {
								that.postData.union_id = res.authResult.unionid;
								uni.getUserInfo({
									provider: 'weixin',
									success: function (infoRes) {
										that.postData.openid = infoRes.userInfo.openId;
										that.postData.nickname = infoRes.userInfo.nickName;
										that.postData.gender = infoRes.userInfo.gender;
										that.postData.head_pic = infoRes.userInfo.avatarUrl;
										jewel.post('auth/register',that.postData,false,function(res){
											that.isRotate = false
											if (res.data.code == 0) {
												uni.showToast({
													icon:'success',
													title:res.data.msg,
													duration:500
												})
												uni.setStorage({
													key: 'token',
													data: res.data.data.token,
												});
												uni.setStorage({ // 保存用户的信息
													key: 'userInfo',
													data: res.data.data.member,
													success() {
														//注册设备
														henglang.regPush(true);
													}
												});
												setTimeout(()=>{
													uni.switchTab({
														url:'/pages/jewel/index/index'
													})
												},500)
											}else{
												jewel.showToast(res.data.msg);
											}
										},function(res){
											that.isRotate = false
											jewel.showToast('请求失败');
											that.nCountdown = false;
										});
									}
								});	
							}
						});
					}
					// #endif
				}
			
			},
			// 账号登录获取验证码
			getCode() {
				let that = this
				uni.hideKeyboard()
				if (!that.timer) {
					uni.showLoading({
						title: '正在发送'
					});
					jewel.post('auth/sendRegVerify',{mobile: that.postData.mobile},false,function(res){
						uni.hideLoading()
						if (res.data.code == 0) {
							jewel.showToast(res.data.msg,1000);
							that.count = TIME_COUNT;
							that.btnMsg = 's重发';
							that.timer = setInterval(() => {
								if (that.count > 0 && that.count <= TIME_COUNT) {
									that.count--;
								} else {
									clearInterval(that.timer);
									that.timer = null;
									that.count = '重新获取';
									that.btnMsg = '';
								}
							}, 1000);
						} else {
							jewel.showToast(res.data.msg)
							clearInterval(that.timer);
							that.timer = null;
							that.count = '获取验证码';
							that.btnMsg = '';
						}
					});
				}
			},
			
			// 登录方式切换
			loginChange() {
				// 置空处理
				this.password = '';
				this.clearText()
				uni.hideKeyboard()
				// this.$nextTick(function() {
				// 	this.isToggle = !this.isToggle;
				// });
			},
			
			pwdInput(e){
				this.isShowClear_pwd = e.detail.value != ''?true:false
			},
			cpwdInput(e){
				this.isShowClear_cpwd = e.detail.value != ''?true:false
			},
			//清空输入框内容
			clearText(type){
				if(type == 'password'){
					this.password = ''
					this.isShowClear_pwd = false
				}else{
					this.confirm_password = ''
					this.isShowClear_cpwd = false
				}
			},
			//清空按钮显示与隐藏------密码
			isShowPwdClear(e){
				if(e.type == 'focus' && this.password != ''){
					this.isShowClear_pwd = true
				}else{
					this.isShowClear_pwd = false
				}
			},
			//清空按钮显示与隐藏------确认密码
			isShowCPwdClear(e){
				if(e.type == 'focus' && this.confirm_password != ''){
					this.isShowClear_cpwd = true
				}else{
					this.isShowClear_cpwd = false
				}
			}
		}
	}
</script>

<style scoped lang="less">
	.flex{
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		/* #ifndef APP-NVUE */
		flex-direction: row;
		/* #endif */
	}
	.flex1{
		flex: 1;
	}
	.flex-wrap{
		flex-wrap: wrap;
	}
	.f-a-start{
		align-items: flex-start;
	}
	.f-a-center{
		align-items: center;
	}
	.f-j-center{
		justify-content: center;
	}
	.f-j-between{
		justify-content: space-between;
	}
	.page{
		background-color: #FFFFFF;
	}

	.loginBar {
		width: 750rpx;
		height: 88rpx;
		padding: 0 24rpx;
		box-sizing: border-box;
		.bar-left {
			width: 42rpx;
			height: 42rpx;
			padding: 5rpx;
		}
		.bar-right {
			font-size: 32rpx;
			color: #333333;
		}
	}
	
	.logo-text {
		text-align: center;
		font-size: 38rpx;
		padding: 30rpx 0;
	}
	

	.account {
		width: 750rpx;
		margin-top: 24rpx;
		.section {
			position: relative;
			width: 664rpx;
			border-bottom: 1px solid #dddddd;
			padding: 24rpx 0;
			input{
				font-size: 30rpx;
				color: #181818;
				height: 36rpx;
				border: 0;
				padding: 0;
				outline: none;
			}
			.pwd{
				width: 300rpx !important;
			}
			.pwd-clearText{
				padding: 0 20rpx;
				opacity: 0;
			}
			.pwd-clearText-show{
				opacity: 1;
			}
			.getCodeBtn {
				padding: 5rpx 15rpx;
				color: #d71311;
				border: 1px solid #d71311;
				font-size: 24rpx;
				border-radius: 20px;
			}
		}
	}
	
	
	.agreement {
		width: 750rpx;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		font-size: 24rpx;
		padding: 20rpx 0;
		.text{
			color: #4c4c4c;
		}
		.navigate {
			padding: 10rpx 0;
			color: #d71311;
			font-size: 26rpx;
		}
	}
	

	



	.icon {
		width: 70rpx;
		height: 70rpx;
		display: block;
		margin: 0 auto;
		margin-top: 100rpx;
	}
	.loginBtn{
		width:664rpx;		height: 100rpx;
		color: #FFFFFF;
		background-color: #d71311;
		text-align: center;
		line-height: 100rpx;
		font-size: 28rpx;
		border-radius: 50px;
		margin-top: 40rpx;
		opacity: 0.4;
		transition-property: width;
		transition-duration: 0.4s;
		transition-delay: 0s;
		transition-timing-function: cubic-bezier(.57,.19,.51,.95);
	}
	.loginBtnOpacity{
		opacity: 1;
	}
	.loginBtnLoading {
		width:100rpx;
	}
	.btnLoading{
		width: 48rpx;
		height: 48rpx;
	}
	/* 旋转动画 */
	.rotate_loop{
		-webkit-transition-property: -webkit-transform;
	    -webkit-transition-duration: 1s;
	    -moz-transition-property: -moz-transform;
	    -moz-transition-duration: 1s;
	    -webkit-animation: rotate 1s linear infinite;
	    -moz-animation: rotate 1s linear infinite;
	    -o-animation: rotate 1s linear infinite;
	    animation: rotate 1s linear infinite;
	}
	@-webkit-keyframes rotate{from{-webkit-transform: rotate(0deg)}
	    to{-webkit-transform: rotate(360deg)}
	}
	@-moz-keyframes rotate{from{-moz-transform: rotate(0deg)}
	    to{-moz-transform: rotate(359deg)}
	}
	@-o-keyframes rotate{from{-o-transform: rotate(0deg)}
	    to{-o-transform: rotate(359deg)}
	}
	@keyframes rotate{from{transform: rotate(0deg)}
	    to{transform: rotate(359deg)}
	}
</style>

